<template>
  <div class="app">
    <div class="first" v-for="(v, i) in $store.state.order.foodNum" :key="i">
      <div class="item" v-if="v.num != 0">
        <div class="box1">
          <img :src="v.foodPic" />
        </div>
        <div class="box2">
          <p class="name">{{ v.foodName }}</p>
          <p class="price">{{ v.foodMoney }}</p>
        </div>
        <div class="box3">
          <!-- 删除菜品 -->
          <span class="el-icon-circle-close" @click="clean(v.foodId)"></span>
          <div class="num">
            <!-- 加减菜品 -->
            <span class="el-icon-remove" @click="subfood(v.foodId)"></span>
            <!-- 份 -->
            <input type="text" :value="v.num" />
            <span
              class="el-icon-circle-plus"
              @click="addOnefood(v.foodId)"
            ></span>
          </div>
        </div>
      </div>
    </div>

    <div class="last">
      <div class="box1">
        <!-- 清空订单 -->
        <div class="clean" @click="clear()">清空</div>

        <!-- 选桌号 -->
        <div @click="table()" class="table">选桌号</div>
        <!-- 下单 -->
        <div @click="order()" class="order">下单</div>

        <!-- <div class=table>{{tableNumber}}</div> -->
      </div>
      <!-- 结账 -->
      <div class="jiezhang" @click="payOrder()">
        结账
        <span>{{ $store.state.order.allnum }}</span>
      </div>
    </div>
    <!-- <div ref="pay" v-html="pay"></div> -->
    <!-- <div v-html="payform" ref="payform"></div> -->
    <div ref="alipayWap" v-html="alipay" />
  </div>
</template>

<script>
import {
  // clearOrder,
  // addOnefood,
  // subfood,
  findAlldining,
  payOrder,
  // deleteOneFood,
  addOrder,
} from "@/apis/liwenjing/diancan.js";
export default {
  data() {
    return {
      items: [],
      num: 1,
      payform: "",
      orderId: "",
      alipay: "",
    };
  },

  mounted() {
    console.log("this.$store.order.foodNum", this.$store.state.order.foodNum);
  },
  computed: {
    list() {
      return this.$store.state.order.foodNum.num != 0;
    },
  },
  methods: {
    // 选桌号
    table() {
      findAlldining().then((ok) => {
        console.log(ok);
        console.log(ok.data.data);
        this.$router.push("/zhuowei");
      });
    },
    // 下单
    order() {
      this.$store.commit("addorder", this.$route.query.zhuowei);

      // 点击下单 点餐 加入订单
      addOrder(this.$store.state.order.foodData).then((res) => {
        console.log(res);
         this.orderId=res.data.orderId
      });
    },

    // 清空订单
    clear() {
      this.$store.commit("clear");
      // this.$store.commit("addcount")
    },
    // 减1
    subfood(foodId) {
      this.$store.commit("del", foodId);
      //  this.$store.commit("addcount")
    },
    // 加1
    addOnefood(foodId) {
      this.$store.commit("add", foodId);
      // this.$store.commit("addcount")
    },
    // 点击删除
    clean(foodId) {
      this.$store.commit("clean", foodId);
      // this.$store.commit("addcount")
    },
    // 支付
    payOrder() {
      payOrder(this.orderId).then((res) => {
       if(this.orderId==""){
        alert("请先下单")
       }
        console.log(res.data);
        // 渲染支付页面
        this.alipay = res.data.data;
        // 防抖避免重复支付
        this.$nextTick(() => {
          // 提交支付表单
          this.$refs.alipayWap.children[0].submit();
          setTimeout(() => {
            // this.toPayFlag = false;
          }, 500);
        
        });

      });
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.app {
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  overflow: auto;
  box-sizing: border-box;
}

/* .first {
  /* margin-bottom: 100px; */

/* item 是每个已点餐品 */
.item {
  flex: 1;
  width: 100%;
  height: 70px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-evenly;
  font-size: 16px;
  box-sizing: border-box;
  /* margin: 2px 0; */
}

/* box1 中存放图片 */
.item .box1 {
  height: 100%;
  flex: 1;
}

img {
  width: 80px;
  height: 70px;
  border-radius: 10px;
}

/* box2 中存放菜名 */
.item .box2 {
  height: 100%;
  flex: 1;
  text-align: center;
  line-height: 35px;
}

/* box3 中存放数量 */
.item .box3 {
  height: 100%;
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  top: 0;
}
.box3 .el-icon-circle-close {
  position: absolute;
  top: 6px;
  right: 5px;
}

.box3 .num {
  height: 20px;
  display: flex;
  position: absolute;
  bottom: 5px;
  left: 50%;
  margin-left: -40px;
}
.box3 .el-icon-remove {
  line-height: 20px;
}
.box3 .el-icon-circle-plus {
  line-height: 20px;
}

.box3 input {
  margin: 0 5px;
  height: 15px;
  width: 30px;
  text-align: center;
}

/* 结账部分 */

.last {
  flex: 1;
  width: 300px;
  height: 110px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(120, 169, 47);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.last .box1 {
  width: 100%;
  height: 56px;
  display: flex;
}

/* 清空 选桌子 下单 */
.box1 .clean,
.table,
.order {
  width: 33.3%;
  background-color: #faebd7;
  border: 1px solid #524949;
}

/* 结账 */
.last .jiezhang {
  width: 300px;
  height: 60px;
  line-height: 50px;
  font-size: 25px;
  color: #fff;
  border: 0.8px solid #eedddd;
  border: 1px solid;
}
.last .box1 div {
  border: 0.8px solid rgb(255, 255, 255);
  background-color: #ffce8f;
  color: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 55px;
}
</style>